<template>
  <div class="axiom-tab">
    <div class="axiom-tab__nav">
      <AxiomButton
        v-for="(tab, index) in tabs"
        :key="tab.key || index"
        class="axiom-tab__item"
        :class="{ 'is-active': activeTab === (tab.key || index) }"
        @click="handleTabClick(tab.key || index)"
        text
        :type="activeTab === (tab.key || index) ? 'primary' : 'default'"
      >
        {{ tab.label }}
      </AxiomButton>
    </div>
    
    <div class="axiom-tab__content">
      <slot 
        :activeTab="activeTab"
        :activeTabData="activeTabData"
      />
    </div>
  </div>
</template>

<script>
import AxiomText from './AxiomText.vue';
import AxiomButton from './AxiomButton.vue';

export default {
  name: 'AxiomTab',
  components: {
    AxiomText,
    AxiomButton
  },
  // mixins: [GlobalUtilsMixin],
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: [String, Number],
      default: null,
    },
    defaultActiveTab: {
      type: [String, Number],
      default: null,
    },
  },
  emits: ['update:modelValue', 'tab-change'],
  computed: {
    activeTab() {
      if (this.modelValue !== null) {
        return this.modelValue
      }
      if (this.defaultActiveTab !== null) {
        return this.defaultActiveTab
      }
      return this.tabs[0]?.key || 0
    },
    activeTabData() {
      return this.tabs.find(
        (tab) => (tab.key || this.tabs.indexOf(tab)) === this.activeTab
      )
    },
  },
  created() {
    // this.logger.debug('AxiomTab 组件初始化', {
    //   tabsCount: this.tabs?.length || 0,
    //   modelValue: this.modelValue,
    //   defaultActiveTab: this.defaultActiveTab,
    // })
  },
  methods: {
    handleTabClick(tabKey) {
      // this.logger.debug('标签页切换', { from: this.activeTab, to: tabKey })
      this.$emit('update:modelValue', tabKey)
      this.$emit('tab-change', tabKey, this.activeTabData)
    },
  },
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-tab';
</style> 